<template>
<el-card>
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" id="addbtn" @click="addDialogVisible=true">添加轮播图</el-button>
     <el-table :data="pictureList" border  stripe >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="图片" prop="link" width="200%">
            <template slot-scope="scope" >
              <div >
                  <img :src="'http://localhost:63135/image/'+scope.row.link" alt="">
              </div>
            </template>
        </el-table-column>
        <el-table-column label="文本" prop="text"></el-table-column>
        <el-table-column label="新闻ID" prop="newsId"></el-table-column>
        <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deletePictureById(scope.row.pictureId)"
          ></el-button>
        </template>
        </el-table-column>
      </el-table>
      <!-- 添加用户用到的模态框 -->
    <el-dialog title="添加图片" :visible.sync="addDialogVisible" width="50%" >
      <el-form :model="addForm"  ref="addForm" label-width="100px" >
        <el-form-item label="图片封面" >
          <input type="file" @change="getCoverUrl" prop=""/>
        </el-form-item>
        <div id="imageBox" v-html="this.URL"></div>
        <el-form-item label="文本" >
          <el-input v-model="addForm.text"></el-input>
        </el-form-item>
        <el-form-item label="新闻" style="width=100%" >
            <el-select  placeholder="选择新闻" v-model="addForm.newsId" clearable>
                <el-option :key="item.newsId" v-for="item in newsList" :label="item.title" :value="item.newsId"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPicture">确 定</el-button>
      </span>
    </el-dialog>
</el-card>
</template>
<script>
export default {
  data () {
    return {
      // 轮播图列表
      pictureList: [],
      // 新增对话框的状态控制
      addDialogVisible: false,
      // 新增轮播图用到的表单对象
      addForm: {
        link: '',
        text: '',
        newsId: ''
      },
      // 图片预览
      URL: '',
      // 新闻列表
      newsList: []

    }
  },
  created () {
    this.getPictureList()
    this.getNewsList()
  },
  methods: {
    // 获取轮播图列表
    async getPictureList () {
      const { data: res } = await this.$http.get('api/picture')
      //   console.log(res)
      this.pictureList = res.Table
    },
    // 删除
    async deletePictureById (id) {
      const removeById = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 取消了删除
      if (removeById !== 'confirm') {
        return this.$message.info('取消了删除')
      }
      console.log(id)
      const { data: res } = await this.$http.post('api/picture?value=' + id)
      console.log(res)

      if (res.status !== 200) return this.$message.error('删除记录失败')
      this.$message.success('删除记录成功')
      this.getPictureList()
    },
    // 点击对话框中的确定
    async addPicture () {
      var params = new URLSearchParams()
      params.append('link', this.addForm.link)
      params.append('text', this.addForm.text)
      params.append('newsId', this.addForm.newsId)

      const { data: res } = await this.$http({
        method: 'post',
        url: 'api/picture',
        data: params,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      })
      if (res.status !== 200) return this.$message.error('添加轮播图失败')
      this.$message.success('添加轮播图成功')

      this.addDialogVisible = false
      this.getPictureList()
    },
    // 当选择了文件后，上传到服务器获取路径
    async getCoverUrl (e) {
      const file = e.target.files[0]
      const param = new FormData() // 创建form对象
      param.append('file', file) // 通过append向form对象添加数据
      // console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      // 添加请求头
      const { data: res } = await this.$http.post('api/upload', param, config)
      // eslint-disable-next-line no-const-assign
      const url = `<img src="http://localhost:63135/image/${res}" style="height:100%;"/>`
      this.URL = url
      this.addForm.link = url
      console.log(url)
      this.addForm.link = res[0]
    },
    // 获取新闻列表
    async getNewsList () {
      const { data: res } = await this.$http.get(
        '/api/cnews'
      )
      console.log(res.Table)
      this.newsList = res.Table
    }
  }

}
</script>
<style lang="less" scoped>

img{
    width: 100%;
}
#addbtn{
    margin: 20px 0;
}
#imageBox {

    position: relative;
    left: 50%;
    width: 177px;
    height: 100px;
    border: 1px solid #000;
    transform: translateX(-50%);
    margin: 20px;
  // background-image: url();
}
</style>
